<script lang="ts" setup name="SearchPage">
import {useRouter} from 'vue-router';
const router = useRouter();
const  list=ref([1,2]);
const  handleItemList=()=>{
  router.push('/noticeList');
}
const  handleDetail=()=>{
  router.push('/noticeDetail');
}
</script>
<template>
  <nav-header class="header" title='系统通知' ></nav-header>
  <div class="notice-list">
      <div class="notice-list-item" v-for="(item,index) in [1,2]" @click="handleDetail">
          <div class="date">03/11/2023 14:46:18</div>
          <div class="info">
             <div class="title">Withdrawal review rejected</div>
             <div class="desc">Your application for USDT withdrawal has been rejected and the assets have been returned. Order number: WR202300318</div>
             <van-cell title="了解详情" is-link value="" />
          </div>
      </div>
  </div>
</template>

<style lang="scss" scoped>
.notice-list{
  padding: 10px;
   &-item{
      display: flex;
     flex-direction: column;
     justify-content: center;
     margin-bottom: 10px;
     .date{
       font-size: 6px;
       text-align: center;
       color: #BCC2CE;
     }
     .info{
       margin-top: 4px;
       background: #FFFFFF;
       border: 1px solid #E6E7E9;
       border-radius: 12px;
       padding: 8px;
       padding-bottom: 0;
       .title{
         font-weight: bold;
         font-size: 8px;
         color: #2C2C2C;
       }
       .desc{
         padding-top: 4px;
         padding-bottom: 4px;
         font-weight: 400;
         font-size: 7px;
         color: #777777;
         position: relative;
         &::after{
           content: '';
           position: absolute;
           bottom: 0;
           height: 0.5px;
           width: 100%;
           background: #ddd;
           left: 0;
         }
       }
       :deep(.van-cell){
         padding-left: 0;
         padding-right: 0;
       }
       :deep(.van-cell__title){
         font-weight: 500;
         font-size: 7px;
         color: #777777;
       }
       :deep(.van-cell__value){
         display: flex;
         justify-content: flex-end;
         align-items: center;
          span{
            display: inline-block;
            width: 2px;
            height: 2px;
            border-radius: 2px;
            background: red;
          }
       }
     }
   }
}
</style>
